<!-- 表格左侧机构树、地区选择树 -->
<template>
    <a-layout-sider width="300" class="site-layout-background">
        <a-input-search
            v-model:value="searchValue"
            placeholder="Search"
            style="margin-bottom: 8px"
            @search="onSearch"
        />
        <a-tree
            :treeData="filteredTreeData"
            :defaultExpandAll="true"
            :filterTreeNode="filterTreeNode"
        />
    </a-layout-sider>
</template>

<script setup>
import { ref, computed } from 'vue';
import { InputSearch as AInputSearch, Tree as ATree, LayoutSider as ALayoutSider } from 'ant-design-vue';

const props = defineProps({
    treeData: {
        type: Array,
        required: true
    }
});

const searchValue = ref('');

const filteredTreeData = computed(() => {
    if (!searchValue.value) {
        return props.treeData;
    }
    return filterTree(props.treeData, searchValue.value);
});

const filterTree = (data, searchValue) => {
    return data
        .map(node => {
            const children = node.children ? filterTree(node.children, searchValue) : [];
            if (node.title.includes(searchValue) || children.length) {
                return { ...node, children };
            }
            return null;
        })
        .filter(node => node);
};

const filterTreeNode = (node) => {
    return node.title.includes(searchValue.value);
};

const onSearch = (value) => {
    searchValue.value = value;
};
</script>

<style scoped>
.site-layout-background {
    background: #fff;
}
</style>